<template>
  <div>
    <div class="form">
      <div class="header">
        <p>{{ title }}</p>
      </div>
      <div class="title"><h3>苹果10￥/斤,折扣《8折》</h3></div>
      <div class="inp">
        <p>请输入你要购买的斤数：<input type="text" v-model.lazy="much" /></p>
      </div>
      <div class="btn">
        <button @click="pay">结账买单</button>
      </div>
      <div class="bill">
        <span
          >总价:{{ much * 10 }}￥元 折后价:{{ much * 8 }}￥元 省了:{{
            much * 2
          }}￥元</span
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "欢迎光临_vue开发的收银系统_水果店",
      much: "",
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    pay() {},
  },
};
</script>

<style scoped>
.form {
  display: flex;
  flex-direction: column;
  width: 500px;
  height: 300px;
  margin: 100px auto;
  border: 1px solid black;
  text-align: center;
}
.header,
.title,
.inp,
.btn,
.bill {
  flex: 1;
}
</style>
